<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background-color: black;
		}
		.wrapper{
			width: 50%;
			height: 500px;
			background-color: #fff;
			border: 1px solid #000;
			margin: 0 auto;
		}
		img{
			height: 220px;
		}

		.fl{
			border: 1px solid #000;
			margin: 9px;
			float: left;
		}
		/*css里面的滤镜功能*/
		.gray {     
			 -webkit-filter: grayscale(100%);   
			  -moz-filter: grayscale(100%);  
			   -ms-filter: grayscale(100%);   
			  -o-filter: grayscale(100%);     
			     filter: grayscale(100%); 	     
			 
				filter: gray; 
		}
		.rgba{
			background:rgba(0,0,0,0.8);
		}
		
	</style>
</head>
<body>
	<div class="wrapper">
		<div>
			<div class="fl">
				<img src="../day02/image/01.jpg" alt="" class="gray">
			</div>
			<div class="fl">
				<img src="../day02/image/01.jpg" alt="">
			</div>
			<div class="fl">
				<img src="../day02/image/01.jpg" alt="">
			</div>
			<div class="fl">
				<img src="../day02/image/01.jpg" alt="">
			</div>
			<div class="fl">
				<img src="../day02/image/01.jpg" alt="">
			</div>
			<div class="fl">
				<img src="../day02/image/01.jpg" alt="">
			</div>
		</div>
	</div>
</body>
<script src="../jquery-3.3.1.min.js"></script>
<script>
	//解题思路，当前鼠标放上的高亮，其余的变成灰色
	var imgs = $("img");

	var div = $("div");

	console.log(imgs);

	for( var i = 0 ;i < imgs.length ;i++){

		imgs[i].index = i;

		//给每个img绑定鼠标事件
		$(imgs[i]).mouseover(function(){

			//清理每个图片的class
			for(var j = 0;j < imgs.length;j++){

				$(imgs[j]).addClass("gray");
				// $(div[j]).addClass("gray");
			}

			//给当前受事件影响的图片加上class
			$(imgs[this.index]).removeClass("gray");
			// $(div[this.index]).removeClass("gray");

		})

	}
</script>
</html>